<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>Node.js的学习笔记（一）.md | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="学习笔记," />
  

  
  <meta name="description" content="由于Node.js的内容和API过于繁杂，只能先简单的过一遍在实际使用中慢慢加深学习，那么就从简单的基础应用开始，以连接数据库，增删查改，编写接口开始;Node.js 是一个基于 V8 JavaScript 引擎构建的 JavaScript 运行环境。是一个事件驱动I/O服务端JavaScript环境。使用 Node.js 时，我们不仅仅 在实现一个应用，同时还实现了整个 HTTP 服务器">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2019-07-24
    </span>
    
      <span>
        | <a href="/blog/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><i class="fa fa-bookmark"></i>学习笔记</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2022-10-8 9:56 
    </span>
  </div>
  <h1 class="passage-title">
    Node.js的学习笔记（一）.md
  </h1>
  
  <article class="passage-article">
    <h2 id="项目的开启"><a href="#项目的开启" class="headerlink" title="项目的开启"></a>项目的开启</h2><p>由于Node.js的内容和API过于繁杂，只能先简单的过一遍在实际使用中慢慢加深学习，那么就从简单的基础应用开始，以连接数据库，增删查改，编写接口开始</p>
<blockquote>
<p>npm init</p>
</blockquote>
<p>初始化一些项目的基础信息，填写好之后，项目就算开始了</p>
<h2 id="开发环境的配置"><a href="#开发环境的配置" class="headerlink" title="开发环境的配置"></a>开发环境的配置</h2><h3 id="安装数据库相关"><a href="#安装数据库相关" class="headerlink" title="安装数据库相关"></a>安装数据库相关</h3><blockquote>
<p>安装 MySql，建表，配置约束建</p>
</blockquote>
<p>我之前看了下MySQL 没仔细研究，只能先用可视化工具 phpmyadmin 先用着，等熟悉后在考虑命令编辑的问题，我使用的是 WAMPSERVER 的集成环境，安装好数据库后，登陆 phpmyadmin【 <a target="_blank" rel="noopener" href="http://localhost/phpmyadmin">http://localhost/phpmyadmin</a> 】 再创建要用到的表，这里就不仔细讲了，</p>
<blockquote>
<p>npm install mysql</p>
</blockquote>
<p>安装mysql 配套模块,node需要 mysql 模块对数据库进行连接，</p>
<h3 id="安装热更新模块"><a href="#安装热更新模块" class="headerlink" title="安装热更新模块"></a>安装热更新模块</h3><blockquote>
<p>npm install hotnode</p>
</blockquote>
<figure class="highlight plaintext"><figcaption><span>package.json</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">···</span><br><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">  &quot;start&quot;: &quot;hotnode index.js&quot;,</span><br><span class="line">  &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><br><span class="line">&#125;,</span><br><span class="line">····</span><br></pre></td></tr></table></figure>


<p>在 node 项目开发中，每次更新都要手动更新一遍服务器，相当麻烦，所以迫切需要热更新模块来解决手动更新的麻烦。安装好后，在package.json 里配置 自定义命令,之后执行 启动命令 <code>npm start</code> 就好了</p>
<h3 id="安装Express-模块"><a href="#安装Express-模块" class="headerlink" title="安装Express 模块"></a>安装Express 模块</h3><blockquote>
<p>npm install express –save</p>
</blockquote>
<p>安装 Express 并将其保存到依赖列表中,还需要安装下列几个重要模块</p>
<ul>
<li>body-parser - node.js 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。</li>
<li>cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie，并把它们转成对象。</li>
<li>multer - node.js 中间件，用于处理 enctype=”multipart/form-data”（设置表单的MIME编码）的表单数据</li>
</ul>
<blockquote>
<p>npm install body-parser –save<br>npm install cookie-parser –save<br>npm install multer –save</p>
</blockquote>
<p>这几个模块作为重要模块，具体的使用可以看官方文档或参考我的使用</p>
<p>express 是一个基于node的 web开发模块，可以基于 express 来引入中间件或是其他需要</p>
<h3 id="可选安装模块"><a href="#可选安装模块" class="headerlink" title="可选安装模块"></a>可选安装模块</h3><h4 id="log4js-日志管理模块"><a href="#log4js-日志管理模块" class="headerlink" title="log4js 日志管理模块"></a>log4js 日志管理模块</h4><blockquote>
<p>npm install log4js</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"># 入口配置</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line">const log4js = require(&#x27;log4js&#x27;);</span><br><span class="line">log4js.configure(&#123;</span><br><span class="line">  appenders: &#123; cheese: &#123; type: &#x27;file&#x27;, filename: &#x27;cheese.log&#x27; &#125; &#125;,</span><br><span class="line">  categories: &#123; default: &#123; appenders: [&#x27;cheese&#x27;], level: &#x27;trace&#x27; &#125; &#125;</span><br><span class="line">&#125;)</span><br><span class="line">...</span><br><span class="line"></span><br><span class="line"># appenders：以 file 的形式将日志记录在 cheese.log 中</span><br><span class="line"># categories：将错误级别记录在 cheese 配置中</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>当项目开始运行的时候，很多时候管理人员需要对项目的运行状态进行检查，需要知晓项目的运作情况，这个时候就需要一个日志记录器.默认情况下，不会进行日志输出，需要在入口js 中进行配置。具体的配置可以查看官网文档参考我的使用</p>
<h2 id="node-的入口文件"><a href="#node-的入口文件" class="headerlink" title="node 的入口文件"></a>node 的入口文件</h2><p>设置一个入口文件 index.js,在最开始的时候执行。</p>
<figure class="highlight plaintext"><figcaption><span>index.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">const express=require(&#x27;express&#x27;)</span><br><span class="line">const Router=require(&#x27;./router&#x27;)  //路由文件</span><br><span class="line">const Inter=require(&#x27;./Interface&#x27;)//接口文件</span><br><span class="line">const bodyParser = require(&#x27;body-parser&#x27;)</span><br><span class="line"></span><br><span class="line">const log4js = require(&#x27;log4js&#x27;); //日志配置</span><br><span class="line">log4js.configure(&#123;</span><br><span class="line">  appenders: &#123; cheese: &#123; type: &#x27;file&#x27;, filename: &#x27;cheese.log&#x27; &#125; &#125;,</span><br><span class="line">  categories: &#123; default: &#123; appenders: [&#x27;cheese&#x27;], level: &#x27;trace&#x27; &#125; &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">const app=express(); //</span><br><span class="line">  app.use(bodyParser.json());</span><br><span class="line">  app.use(bodyParser.urlencoded(&#123;extended: false&#125;));</span><br><span class="line"></span><br><span class="line">const server=app.listen(8888,()=&gt;&#123;</span><br><span class="line">  logger.trace(&#x27;服务器启动,正在监听8888端口&#x27;);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">//接口</span><br><span class="line">Inter.api(express,app)</span><br><span class="line"></span><br><span class="line">//路由</span><br><span class="line">Router.middle(express,app)</span><br></pre></td></tr></table></figure>

<h3 id="接口的编辑"><a href="#接口的编辑" class="headerlink" title="接口的编辑"></a>接口的编辑</h3><figure class="highlight plaintext"><figcaption><span>Interface.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line">const api=(express,app)=&gt;&#123;</span><br><span class="line">  const mysql=require(&#x27;mysql&#x27;);</span><br><span class="line">  const connection=mysql.createConnection(&#123; //连接 mysql 的配置</span><br><span class="line">    host :&#x27;localhost&#x27;,</span><br><span class="line">    user :&#x27;root&#x27;,</span><br><span class="line">    password :&#x27;&#x27;,</span><br><span class="line">    // port: &#x27;8888&#x27;,</span><br><span class="line">    database :&#x27;mysql&#x27;</span><br><span class="line">  &#125;);</span><br><span class="line">  connection.connect()</span><br><span class="line"></span><br><span class="line">  //查询接口</span><br><span class="line">  app.get(&#x27;/list&#x27;,(require,response,next)=&gt;&#123;</span><br><span class="line">    let name=require.query.name</span><br><span class="line">    let sql=&#x27;SELECT * FROM websites&#x27;;</span><br><span class="line">    if(name)&#123;</span><br><span class="line">      sql = &quot;SELECT * FROM websites WHERE name LIKE &quot;+mysql.escape(name)</span><br><span class="line">    &#125;</span><br><span class="line">    // 执行数据库命令，按返回的数据返回状态</span><br><span class="line">    connection.query(sql,function (err, result) &#123;</span><br><span class="line">      if(err)&#123;</span><br><span class="line">        response.status(500).json(&#123;</span><br><span class="line">          code:500,</span><br><span class="line">          message:err.toString()</span><br><span class="line">          // message:&quot;数据库查询出错！&quot;</span><br><span class="line">        &#125;)</span><br><span class="line">        logger.error(err.toString());</span><br><span class="line">        return</span><br><span class="line">      &#125;</span><br><span class="line">      response.json([</span><br><span class="line">        ...result</span><br><span class="line">      ]);</span><br><span class="line">      response.end();</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;)</span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p>至此一个简单的应用就算是好了，但是如果想要运用在实践上，那么还需要考虑更细化的问题，返回的状态协议，上传文件的处理，sql反注入以及日志的细化处理，中间件的处理，路由的一系列处理等等。当然一个好的开始总是好的，剩下的问题可以看后面的笔记以及附录。</p>
<h2 id="可能出现的问题"><a href="#可能出现的问题" class="headerlink" title="可能出现的问题"></a>可能出现的问题</h2><h3 id="怎么建立约束键？"><a href="#怎么建立约束键？" class="headerlink" title="怎么建立约束键？"></a>怎么建立约束键？</h3><p>在 phpmyadmin 中，约束键是表与表之间的关联，它们可以都是主键，首先在表的-操作界面-将表的存储引擎设置为InnoDB，排序规则调整为utf8_general_ci。然后进入数据库的-设计器界面-选择左侧的创建关系，最后选择两个表的字段连接，填写删除和更新配置：cascade(级联：在父表数据被删除后，子表对应数据也被删除) set Null(在父表数据被删除后，子表对应数据设置为null) no action(不采取行动) RESTRICT(在删除父表数据的时候，如有关联，禁止删除)</p>
<h2 id="Nodejs的应用"><a href="#Nodejs的应用" class="headerlink" title="Nodejs的应用"></a>Nodejs的应用</h2><p>Nodejs由下列部分组成</p>
<ul>
<li>1：引入required模块（使用require指令载入node模块）</li>
<li>2：创建服务器 （服务器可以监听客户端请求，类似apache）</li>
<li>3：接收请求和响应数据 （接受请求，返回数据）</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">// 引入required模块</span><br><span class="line">var http = require(&#x27;http&#x27;);</span><br><span class="line"></span><br><span class="line">// 创建服务器</span><br><span class="line">http.createServer(function(request,response)&#123;</span><br><span class="line"></span><br><span class="line">  // 发送 HTTP 头部 </span><br><span class="line">  // HTTP 状态值: 200 : OK</span><br><span class="line">  // 内容类型: text/plain</span><br><span class="line">  response.writeHead(200, &#123;&#x27;Content-Type&#x27;: &#x27;text/plain&#x27;&#125;);</span><br><span class="line">  // 发送响应数据 &quot;Hello World&quot;</span><br><span class="line">  response.end(&#x27;Hello World\n&#x27;);</span><br><span class="line"></span><br><span class="line">&#125;).listen(8888);</span><br><span class="line"></span><br><span class="line">// 终端打印如下信息</span><br><span class="line">console.log(&#x27;Server running at http://127.0.0.1:8888/&#x27;);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>第一行请求（require）Node.js 自带的 http 模块，并且把它赋值给 http 变量。<br>接下来我们调用 http 模块提供的函数： createServer 。这个函数会返回 一个对象，这个对象有一个叫做 listen 的方法，这个方法有一个数值参数， 指定这个 HTTP 服务器监听的端口号。</p>
</blockquote>
<h2 id="NodeJS的模块系统"><a href="#NodeJS的模块系统" class="headerlink" title="NodeJS的模块系统"></a>NodeJS的模块系统</h2><p>为了让Node.js的文件可以相互调用，Node.js提供了一个简单的模块系统，一个 Node.js 文件就是一个模块</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">//hello.js </span><br><span class="line">function Hello() &#123; </span><br><span class="line">    var name; </span><br><span class="line">    this.setName = function(thyName) &#123; </span><br><span class="line">        name = thyName; </span><br><span class="line">    &#125;; </span><br><span class="line">    this.sayHello = function() &#123; </span><br><span class="line">        console.log(&#x27;Hello &#x27; + name); </span><br><span class="line">    &#125;; </span><br><span class="line">&#125;; </span><br><span class="line">module.exports = Hello;</span><br><span class="line"></span><br><span class="line">//main.js </span><br><span class="line">var Hello = require(&#x27;./hello&#x27;); </span><br><span class="line">hello = new Hello(); </span><br><span class="line">hello.setName(&#x27;BYVoid&#x27;); </span><br><span class="line">hello.sayHello(); </span><br></pre></td></tr></table></figure>

<h2 id="npm-及相关的模块"><a href="#npm-及相关的模块" class="headerlink" title="npm 及相关的模块"></a>npm 及相关的模块</h2><p>NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题.express是常用的 Node.js web框架模块</p>
<blockquote>
<p>$ npm install express</p>
</blockquote>
<p>NPM的一些常用命令和使用技巧……</p>
<h3 id="event-模块"><a href="#event-模块" class="headerlink" title="event 模块"></a>event 模块</h3><p>events 模块只提供了一个对象： events.EventEmitter。EventEmitter 的核心就是事件触发与事件监听器功能的封装</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 引入 events 模块</span><br><span class="line">var events = require(&#x27;events&#x27;);</span><br><span class="line">// 创建 eventEmitter 对象</span><br><span class="line">var eventEmitter = new events.EventEmitter();</span><br><span class="line"></span><br><span class="line">// 绑定事件及事件的处理程序</span><br><span class="line">eventEmitter.on(&#x27;eventName&#x27;, eventHandler);</span><br><span class="line"></span><br><span class="line">eventEmitter.on(&#x27;someEvent&#x27;, function(arg1, arg2) &#123; </span><br><span class="line">    console.log(&#x27;listener1&#x27;, arg1, arg2); </span><br><span class="line">&#125;); </span><br><span class="line"></span><br><span class="line">// 触发事件</span><br><span class="line">eventEmitter.emit(&#x27;eventName&#x27;);</span><br></pre></td></tr></table></figure>


<h3 id="fs-readFile-模块"><a href="#fs-readFile-模块" class="headerlink" title="fs.readFile 模块"></a>fs.readFile 模块</h3><p>fs.readFile() 是异步函数用于读取文件;如果在读取文件过程中发生错误，错误 err 对象就会输出错误信息。<br>如果没发生错误，readFile 跳过 err 对象的输出，文件内容就通过回调函数输出</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">var fs = require(&quot;fs&quot;);</span><br><span class="line"></span><br><span class="line">fs.readFile(&#x27;input.txt&#x27;, function (err, data) &#123;</span><br><span class="line">   if (err)&#123;</span><br><span class="line">      console.log(err.stack);</span><br><span class="line">      return;</span><br><span class="line">   &#125;</span><br><span class="line">   console.log(data.toString());</span><br><span class="line">&#125;);</span><br><span class="line">console.log(&quot;程序执行完毕&quot;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Buffer-缓存区-模块"><a href="#Buffer-缓存区-模块" class="headerlink" title="Buffer(缓存区) 模块"></a>Buffer(缓存区) 模块</h3><p>JavaScript 语言自身只有字符串数据类型，没有二进制数据类型，为了处理二进制数据，因此在定义了Buffer类型<br>Node 目前支持的字符编码：</p>
<ul>
<li>ascii - 仅支持 7 位 ASCII 数据。如果设置去掉高位的话，这种编码是非常快的。</li>
<li>utf8 - 多字节编码的 Unicode 字符。许多网页和其他文档格式都使用 UTF-8 。</li>
<li>utf16le - 2 或 4 个字节，小字节序编码的 Unicode 字符。支持代理对（U+10000 至 U+10FFFF）。</li>
<li>ucs2 - utf16le 的别名。</li>
<li>base64 - Base64 编码。</li>
<li>latin1 - 一种把 Buffer 编码成一字节编码的字符串的方式。</li>
<li>binary - latin1 的别名。</li>
<li>hex - 将每个字节编码为两个十六进制字符。</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">// 创建一个长度为 10、且用 0 填充的 Buffer。</span><br><span class="line">const buf1 = Buffer.alloc(10);</span><br><span class="line">// 创建一个长度为 10、且用 0x1 填充的 Buffer。 </span><br><span class="line">const buf2 = Buffer.alloc(10, 1);</span><br><span class="line"></span><br><span class="line">// 创建一个长度为 10、且未初始化的 Buffer。</span><br><span class="line">// 这个方法比调用 Buffer.alloc() 更快，</span><br><span class="line">// 但返回的 Buffer 实例可能包含旧数据，</span><br><span class="line">// 因此需要使用 fill() 或 write() 重写。</span><br><span class="line">const buf3 = Buffer.allocUnsafe(10);</span><br><span class="line"></span><br><span class="line">// 创建256长度的的buffer，然后重写</span><br><span class="line">buf = Buffer.alloc(256);</span><br><span class="line">len = buf.write(&quot;www.runoob.com&quot;);</span><br><span class="line">console.log(&quot;写入字节数 : &quot;+  len);</span><br></pre></td></tr></table></figure>

<h2 id="REPL（交互式解释器）"><a href="#REPL（交互式解释器）" class="headerlink" title="REPL（交互式解释器）"></a>REPL（交互式解释器）</h2><p>node自带交互式解释器，它可以读取(读取用户输入)，执行(执行输入的数据结构)，打印(输出结果)，循环(循环操作以上步骤直到用户两次按下 ctrl-c 按钮退出).Node 的交互式解释器可以很好的调试 Javascript 代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// 启动终端</span><br><span class="line">$ node</span><br><span class="line"></span><br><span class="line">// 它可以执行简单的运算表达式，变量和多行表达式</span><br><span class="line">&gt; 1+2</span><br><span class="line"></span><br><span class="line">&gt;do &#123;</span><br><span class="line">... x++;</span><br><span class="line">... console.log(&quot;x: &quot; + x);</span><br><span class="line">... &#125; while ( x &lt; 5 );</span><br></pre></td></tr></table></figure>

<h2 id="NodeJS-的路由"><a href="#NodeJS-的路由" class="headerlink" title="NodeJS 的路由"></a>NodeJS 的路由</h2><p>我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数，随后路由需要根据这些数据来执行相应的代码<br>为了解析这些数据，我们需要额外的 Node.JS 模块，它们分别是 url 和 querystring 模块</p>
<p>server.js</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">var http = require(&quot;http&quot;);</span><br><span class="line">var url = require(&quot;url&quot;);</span><br><span class="line"> </span><br><span class="line">function start() &#123;</span><br><span class="line">  function onRequest(request, response) &#123;</span><br><span class="line">    var pathname = url.parse(request.url).pathname;</span><br><span class="line">    console.log(&quot;Request for &quot; + pathname + &quot; received.&quot;);</span><br><span class="line">    response.writeHead(200, &#123;&quot;Content-Type&quot;: &quot;text/plain&quot;&#125;);</span><br><span class="line">    response.write(&quot;Hello World&quot;);</span><br><span class="line">    response.end();</span><br><span class="line">  &#125;</span><br><span class="line"> </span><br><span class="line">  http.createServer(onRequest).listen(8888);</span><br><span class="line">  console.log(&quot;Server has started.&quot;);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">exports.start = start;</span><br></pre></td></tr></table></figure>

<p>router</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">function route(pathname) &#123;</span><br><span class="line">  console.log(&quot;pathname&quot;  + pathname);</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line">exports.route = route;</span><br></pre></td></tr></table></figure>

<p>index.js</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var server = require(&quot;./server&quot;);</span><br><span class="line">var router = require(&quot;./router&quot;);</span><br><span class="line"> </span><br><span class="line">server.start(router.route);</span><br></pre></td></tr></table></figure>

<h2 id="Node-静态文件服务"><a href="#Node-静态文件服务" class="headerlink" title="Node 静态文件服务"></a>Node 静态文件服务</h2><p>通过创建服务，将文件资源挂载在服务上；</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> http = <span class="built_in">require</span>(<span class="string">&#x27;http&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">&#x27;fs&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> url = <span class="built_in">require</span>(<span class="string">&#x27;url&#x27;</span>);</span><br><span class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">&quot;path&quot;</span>)</span><br><span class="line"><span class="keyword">var</span> c = <span class="built_in">require</span>(<span class="string">&#x27;child_process&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 创建服务器</span></span><br><span class="line">http.<span class="title function_">createServer</span>( <span class="keyword">function</span> (<span class="params">request, response</span>) &#123; </span><br><span class="line">   <span class="comment">// 解析请求，包括文件名</span></span><br><span class="line">   <span class="keyword">var</span> pathname = url.<span class="title function_">parse</span>(request.<span class="property">url</span>).<span class="property">pathname</span>;</span><br><span class="line">   <span class="keyword">var</span> extname = path.<span class="title function_">extname</span>(pathname);</span><br><span class="line">   <span class="comment">// 输出请求的文件名</span></span><br><span class="line">   <span class="comment">// console.log(&quot;Request for &quot; + pathname + &quot; received.&quot;);</span></span><br><span class="line">   </span><br><span class="line">   <span class="comment">// 从文件系统中读取请求的文件内容</span></span><br><span class="line">   fs.<span class="title function_">readFile</span>(pathname.<span class="title function_">substr</span>(<span class="number">1</span>), <span class="keyword">function</span> (<span class="params">err, data</span>) &#123;</span><br><span class="line">        <span class="keyword">let</span> type = <span class="title function_">memu</span>(extname);</span><br><span class="line">        <span class="keyword">if</span> (err) &#123;</span><br><span class="line">           response.<span class="title function_">writeHead</span>(<span class="number">404</span>, &#123;<span class="string">&#x27;Content-Type&#x27;</span>: type&#125;);</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;             </span><br><span class="line">           response.<span class="title function_">writeHead</span>(<span class="number">200</span>, &#123;</span><br><span class="line">              <span class="string">&#x27;Content-Length&#x27;</span>: data.<span class="property">length</span>,</span><br><span class="line">              <span class="string">&#x27;Content-Type&#x27;</span>: type</span><br><span class="line">           &#125;);    </span><br><span class="line">           </span><br><span class="line">           <span class="comment">// 响应文件内容</span></span><br><span class="line">           response.<span class="title function_">write</span>(data);        </span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//  发送响应数据</span></span><br><span class="line">        response.<span class="title function_">end</span>();</span><br><span class="line">   &#125;);   </span><br><span class="line">&#125;).<span class="title function_">listen</span>(<span class="number">9000</span>);</span><br><span class="line">c.<span class="title function_">exec</span>(<span class="string">&#x27;start http://localhost:9000/index.html&#x27;</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">memu</span>(<span class="params">exname</span>)&#123;</span><br><span class="line">    <span class="keyword">switch</span>(exname)&#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.html&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;text/html&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.css&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;text/css&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.jpg&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;image/jpg&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.png&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;image/png&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.js&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;text/javascript&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.json&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;text/json&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.jpeg&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;image/jpeg&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.gif&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;image/gif&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.svg&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;image/svg+xml&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.rtf&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;application/rtf&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.woff&quot;</span>:<span class="keyword">case</span> <span class="string">&quot;.woff2&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;application/x-font-woff&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">&quot;.webm&quot;</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;video/webm&quot;</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="attr">default</span>:</span><br><span class="line">            <span class="keyword">return</span> <span class="string">&quot;text/plain&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台会输出以下信息</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27; \n \</span></span><br><span class="line"><span class="string">请勿关闭本窗口,打开浏览器访问下列地址  \n\</span></span><br><span class="line"><span class="string">&#x27;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27; http://localhost:8080/index.html&#x27;</span>)</span><br></pre></td></tr></table></figure>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B9%E7%9B%AE%E7%9A%84%E5%BC%80%E5%90%AF"><span class="toc-text">项目的开启</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E7%9A%84%E9%85%8D%E7%BD%AE"><span class="toc-text">开发环境的配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%95%B0%E6%8D%AE%E5%BA%93%E7%9B%B8%E5%85%B3"><span class="toc-text">安装数据库相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E7%83%AD%E6%9B%B4%E6%96%B0%E6%A8%A1%E5%9D%97"><span class="toc-text">安装热更新模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85Express-%E6%A8%A1%E5%9D%97"><span class="toc-text">安装Express 模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8F%AF%E9%80%89%E5%AE%89%E8%A3%85%E6%A8%A1%E5%9D%97"><span class="toc-text">可选安装模块</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#log4js-%E6%97%A5%E5%BF%97%E7%AE%A1%E7%90%86%E6%A8%A1%E5%9D%97"><span class="toc-text">log4js 日志管理模块</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#node-%E7%9A%84%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6"><span class="toc-text">node 的入口文件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A5%E5%8F%A3%E7%9A%84%E7%BC%96%E8%BE%91"><span class="toc-text">接口的编辑</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%AF%E8%83%BD%E5%87%BA%E7%8E%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-text">可能出现的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%8E%E4%B9%88%E5%BB%BA%E7%AB%8B%E7%BA%A6%E6%9D%9F%E9%94%AE%EF%BC%9F"><span class="toc-text">怎么建立约束键？</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Nodejs%E7%9A%84%E5%BA%94%E7%94%A8"><span class="toc-text">Nodejs的应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NodeJS%E7%9A%84%E6%A8%A1%E5%9D%97%E7%B3%BB%E7%BB%9F"><span class="toc-text">NodeJS的模块系统</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E5%8F%8A%E7%9B%B8%E5%85%B3%E7%9A%84%E6%A8%A1%E5%9D%97"><span class="toc-text">npm 及相关的模块</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#event-%E6%A8%A1%E5%9D%97"><span class="toc-text">event 模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#fs-readFile-%E6%A8%A1%E5%9D%97"><span class="toc-text">fs.readFile 模块</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Buffer-%E7%BC%93%E5%AD%98%E5%8C%BA-%E6%A8%A1%E5%9D%97"><span class="toc-text">Buffer(缓存区) 模块</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#REPL%EF%BC%88%E4%BA%A4%E4%BA%92%E5%BC%8F%E8%A7%A3%E9%87%8A%E5%99%A8%EF%BC%89"><span class="toc-text">REPL（交互式解释器）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#NodeJS-%E7%9A%84%E8%B7%AF%E7%94%B1"><span class="toc-text">NodeJS 的路由</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Node-%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E6%9C%8D%E5%8A%A1"><span class="toc-text">Node 静态文件服务</span></a></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2019/07/24/%E3%80%90%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%91Node.js%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2019/09/26/ES6%E4%B8%AD%E5%85%B3%E4%BA%8E%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2019/07/08/React%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%9C%80%E6%B1%82%E4%B8%8E%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2019/09/26/ES6%E4%B8%AD%E5%85%B3%E4%BA%8E%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9A%84%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2019/07/08/React%E5%9C%A8%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%9C%80%E6%B1%82%E4%B8%8E%E9%97%AE%E9%A2%98/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>